<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--上传-->
    <el-dialog title="导入文件" :visible.sync="importMaterBom">
      <el-upload
        class="upload-demo"
        drag
        action='/api/mater/imporExcel'
        :on-success="updateMater"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
      </el-upload>
    </el-dialog>
    <!--数据查询-->
    <el-card class="box-card2">
      <el-form :model="searchForm" class="demo-form-inline">
        <el-row :gutter="20">
          <el-form-item>
            <el-col :span="4">
              <el-input placeholder="原材料名称/化学元素名" v-model="searchForm.name" class="btn"></el-input>
            </el-col>
            <el-button @click="searchMater" plain type="info" class="btn"  icon="el-icon-search">搜索</el-button>
            <el-button @click="toMaterAdd" type="primary" class="btn">添加原材料</el-button>
            <el-button @click="importMaterBom=true" type="info" class="btn"><i class="el-icon-download el-icon--right"></i>导入</el-button>
            <el-button @click="outPut()" type="info" class="btn"><i class="el-icon-upload2 el-icon--right"></i>导出</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <!--中间间隔-->
    <el-row class="box"></el-row>
      <!--原材料列表展示-->
      <el-card class="box-card">
      <el-table
        :data="matList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="编号"
          prop="code"
          width="180">
        </el-table-column>
        <el-table-column
          label="材料名称"
          prop="name"
          width="180">
        </el-table-column>
        <el-table-column
          label="化学元素名称"
          prop="chemical"
          width="180">
        </el-table-column>
        <el-table-column
          label="密度(g/cm³)"
          prop="density"
          width="180">
        </el-table-column>
        <el-table-column
          label="硬度(hrc)"
          prop="hardness"
          width="180">
        </el-table-column>
        <el-table-column
          label="单价"
          prop="price"
          width="180">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-popover placement="right" width="200" trigger="click">
              <el-button @click="getMater(scope)" type="success"><i class="el-icon-search" plain></i></el-button><!--详情按钮-->
              <el-button @click="del(scope)" type="danger"><i class="el-icon-delete" circle></i></el-button><!--删除按钮-->
              <el-button @click="update(scope)" type="primary"><i class="el-icon-edit" circle></i></el-button><!--修改按钮-->
              <el-button slot="reference" type="text">更多操作</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "materialList",
    data(){
      return{
        importMaterBom:false,
        matList: [],
        mater:{},//显示详情的材料对象
        searchForm:{},
        page: {
          pagenum: 0,
          pagesize: 5
        },
        total: 0,
      }
    },
    methods:{
      outPut(){//导出
        location.href='http://localhost:8080/mater/exportExcel';
      },
        updateMater(res,file){//文件上传成功后处理
        this.searchMater();
        this.importProBom=false;
      },
      del(scope){//删除
        let id=scope.row.id;
        this.$http.post("/mater/del/"+id).then((res) => {
          if (res.data.success) {
            this.$message({
              message:res.data.message,
              type:"success"
            })
          } else {
            this.$message.error(res.data.message);
          }
          //刷新
          this.searchMater();
        });
      },
      toMaterAdd(){//添加原材料
        this.$router.push("/materialAdd")
      },
      getMater(scope){//查看详情
        let id=scope.row.id;
        //跳转路由后查询显示
        this.$router.push('/materialDes?id='+id);
      },
      update(scope){//编辑
        let id=scope.row.id;
        //跳转路由后查询显示
        this.$router.push('/materialUpdate?id='+id);
      },
      searchMater() {//原材料列表
        this.$http.post("/mater/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
          this.matList = res.data.result.list;
          this.total = res.data.result.total;
        });
      },
      handleSizeChange: function (val) {//每页显示的条数
        this.page.pagesize = val;
        this.searchMater();
      },
      handleCurrentChange: function (val) {//显示的页数
        this.page.pagenum = val;
        this.searchMater();
      }
    },
    mounted() {
      this.searchMater();
    }
  }
</script>

<style scoped>
  .box-card2{/*搜索框的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .btn{/*按钮的圆角样式*/
    border-radius: 30px;
  }
</style>
